<template>
  <div>
    <z-transfer
      v-model:target-keys="targetKeys"
      v-model:selected-keys="selectedKeys"
      :data-source="mockData"
      :disabled="disabled"
      :show-search="showSearch"
      :filter-option="(inputValue, item) => item.title.indexOf(inputValue) !== -1"
      :show-select-all="false"
      @change="onChange"
    >
      <template
        #children="{
          direction,
          filteredItems,
          selectedKeys,
          disabled: listDisabled,
          onItemSelectAll,
          onItemSelect,
        }"
      >
        <z-table-select
          :row-selection="
            getRowSelection({
              disabled: listDisabled,
              selectedKeys,
              onItemSelectAll,
              onItemSelect,
            })
          "
          :columns="direction === 'left' ? leftColumns : rightColumns"
          :data-source="filteredItems"
          :style="{ pointerEvents: listDisabled ? 'none' : null, width: '100%' }"
          :custom-row="
            ({ key, disabled: itemDisabled }) => ({
              onClick: () => {
                if (itemDisabled || listDisabled) return;
                onItemSelect(key, !selectedKeys.includes(key));
              },
            })
          "
        />
      </template>
    </z-transfer>
    <z-switch
      v-model:checked="disabled"
      un-checked-children="disabled"
      checked-children="disabled"
      style="margin-top: 16px"
    />
    <z-switch
      v-model:checked="showSearch"
      un-checked-children="showSearch"
      checked-children="showSearch"
      style="margin-top: 16px"
    />
  </div>
</template>
<script>
import { defineComponent, ref } from 'vue';
const mockData = [];
for (let i = 0; i < 10; i++) {
  mockData.push({
    key: i.toString(),
    title: `content${i + 1}`,
    description: `description of content${i + 1}`,
    disabled: i % 4 === 0,
  });
}

const originTargetKeys = mockData.filter(item => +item.key % 3 > 1).map(item => item.key);

const leftTableColumns = [
  {
    dataIndex: 'title',
    title: 'Name',
    align: 'center',
    width: '38%'
  },
  {
    dataIndex: 'description',
    title: 'Description',
    align: 'center',
    width: '58%'
  },
];
const rightTableColumns = [
  {
    dataIndex: 'title',
    title: 'Name',
    align: 'center',
    width: '98%'
  },
];

export default defineComponent({
  setup() {
    const targetKeys = ref(originTargetKeys);
    const disabled = ref(false);
    const showSearch = ref(false);
    const leftColumns = ref(leftTableColumns);
    const rightColumns = ref(rightTableColumns);

    const onChange = (nextTargetKeys, keys) => {
      console.log('nextTargetKeys', nextTargetKeys, keys);
    };

    const getRowSelection = ({
      disabled,
      selectedKeys,
      onItemSelectAll,
      onItemSelect,
    }) => {
      return {
        onSelectAll(selected, selectedRows) {
          const treeSelectedKeys = selectedRows
            .filter(item => !item.disabled)
            .map(({ key }) => key);
            console.log(treeSelectedKeys, selected, '-------------selectedAll-----------')
          onItemSelectAll(treeSelectedKeys, selected);
        },
        onSelect({ key }, selected) {
          onItemSelect(key, selected);
        },
        selectedRowKeys: selectedKeys,
      };
    };
    return {
      mockData,
      targetKeys,
      disabled,
      showSearch,
      leftColumns,
      rightColumns,
      onChange,
      getRowSelection,
      selectedKeys: ref([])
    };
  },
});
</script>